<template>
  <div>
    <mg-table
      ref="mgTable"
      v-if="data.length"
      :data="data"
      stripe
      :height="height"
      :header-cell-style="headerCellStyle"
      border=""
      style="width: 100%"
    >
      <el-table-column
            :show-overflow-tooltip="true"
						label="标题">
            <template slot-scope="scope">
            	<span class="linkTitle" style="cursor: pointer;" @click="gotoLink(scope.row)">{{scope.row.pstitle}}</span>
            </template>
						</el-table-column>
						<el-table-column
						prop="releaseTime"
						label="时间"
            :show-overflow-tooltip="true"
						width="90">
						</el-table-column>
						<el-table-column
						prop="psStatus"
						label="处理情况"
						width="68">
						<template slot-scope="scope">
							<div style="font-size:14px;">
                {{scope.row.psStatus == 1?'暂存':scope.row.psStatus == 2?'提交':scope.row.psStatus == 3?'已分派':scope.row.psStatus == 4?'已接受':scope.row.psStatus == 5?'已处置':scope.row.psStatus == 6?'已完成':''}}
              </div>
						</template>
						</el-table-column>
    </mg-table>
  </div>
</template>

<script>
// **********原理:通过定时器不断改变scrollTop来实现自动滚动，使用两倍的数据，一旦第一次的滚动完毕，将scrollTop置为0
// import { storageKey, maxRollTime } from "assets/constant";
import { Table, TableColumn } from "element-ui";
import { mapState } from "vuex";
const scope = process.env.APP_SCOPE_NAME;
export default {
  components: {
    "mg-table": Table,
    "mg-table-column": TableColumn,
  },
  watch: {
    height(val) {
      this.height = val;
    },
    tableData(val) {
      this.setScroll();
    },
  },
  props: {
    col: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    height: {
      type: Number,
      default: 185,
    },
    scroll: {
      type: Boolean,
      default: false,
    },
    tableKey: {
      type: String,
      default: "",
    },
    fontBigger: {
      // 加大号字体
      type: Boolean,
      default: false,
    },
    scrollMilSeconds: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      containEl: null, // 获取表格的body部分
      trHeight: null, // 表格的行高
      headerCellStyle: {
        "font-size": "12px",
      },
      rowHeight: 50,
    };
  },
  computed: {
    // ...mapState(scope, ["scrollMilSeconds"]),
    scrollable() {
      // 用户设定的滚动时间不超过最大值才进行滚动
      return true
      // return this.scroll && this.scrollMilSeconds <= maxRollTime;
    },
    data() {
      // 1.根据表格定义的高度和行高来确定需要滚动的行数
      // 需要滚动，且data数超过表格高度
      let dataLen = this.tableData.length;
      let scrollLen = this.height / this.rowHeight - 2; // 表格滚动需要的数据行数
      if (this.scrollable && dataLen > scrollLen) {
        return this.tableData.concat(this.tableData).concat(this.tableData); // 滚动时，用两倍data
      } else {
        return this.tableData;
      }
    },
    // columns() {
    //   let obj = JSON.parse(localStorage.getItem(this.storageKey));
    //   return this.col.map((item) => {
    //     let col = {
    //       prop: item.field,
    //       label: item.label,
    //       align: "center",
    //       resizable: true,
    //     };
    //     if (obj && obj[this.tableKey] && obj[this.tableKey][item.prop]) {
    //       col.width = obj[this.tableKey][item.prop];
    //     }
    //     return col;
    //   });
    // },
  },
  mounted() {
    setTimeout((_) => {
      this.setScroll();
    }, 20);
  },
  beforeDestroy() {
    this.containEl = null;
    this.trHeight = null;
    this.scrollable && this.interval && clearInterval(this.interval);
  },
  methods: {
    gotoLink(item){
      if(item.linkUrl){
        window.open(item.linkUrl)
      }
    },
    format(val) {},
    setScroll() {
      this.$nextTick((_) => {
        if (this.scrollable) {
          this.containEl = this.$refs.mgTable.$el.querySelector(
            ".el-table__body-wrapper"
          ); // container元素设置scrollTop
          let tr = this.$refs.mgTable.$el.querySelector(
            ".el-table__body-wrapper tr"
          );
          if (!this.containEl || !tr) {
            return;
          }
          this.trHeight = tr.offsetHeight; // 行高
          // 2.每20ms滚动一次
          this.interval = setInterval(this.autoScroll, this.scrollMilSeconds);
        }
      });
    },
    autoScroll() {
       if(!this.containEl) return false;
      if (this.containEl.scrollTop >= this.tableData.length * this.trHeight) {
        // 3.确保第一次滚动滚动到了底部 scrollTop表示滚动条向下滚动时，上面超出部分的高度
        this.containEl.scrollTop = 0;
      } else {
        this.containEl.scrollTop++;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(46, 144, 253, 0.1);
}
.el-table th {
  color: #fff;
  background: rgba(46, 144, 253, 0.3);
  font-size: 1.48vh !important;
  height: 4.63vh;
  line-height: 4.63vh;
  font-family: ping;
}

.el-table tr {
  background-color: rgba(6, 29, 61, 0);
  height: 4.63vh;
  line-height: 4.63vh;
  font-family: ping;
}

.el-table, .el-table__expanded-cell {
  background-color: rgba(6, 29, 61, 0);
}

.el-table td, .el-table th.is-leaf {
  border-bottom: none;
}

.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  border-right: none;
}

.el-table--border, .el-table--group {
  border: none;
}

.el-table--border::after, .el-table--group::after, .el-table::before {
  background-color: rgba(6, 29, 61, 0);
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #182F4A;
}

.el-table {
  color: #fff;
  font-size: 1.48vh !important;
}

.el-table thead {
  color: #003166;
}

.el-table td, .el-table th {
  padding: 0;
}

.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
  padding-left: 2px;
}

.el-table .cell, .el-table th div {
  padding-right: 2px;
}

.el-table .cell {
  height: 3.68vh;
  line-height: 3.68vh;
  white-space: nowrap;
}

.el-table--scrollable-y .el-table__body-wrapper {
  // overflow: hidden;
}

.el-table--border th.gutter:last-of-type {
  border: none;
}

@font-face {
  font-family: ping;
  // src: url('~assets/ping.OTF');
}
</style>
<style scoped lang="scss">
  ::v-deep .el-table{
    background-color: transparent;
    .el-table__cell{
      padding:5px 0;
    }
    tr{
      border: 0 !important;
      background-color: transparent !important;
    }
    tr:nth-child(odd){
      background-color: #0B1547 !important;
    }
    tr:nth-child(even){
      background-color: #000A3B !important;
    }
    td{
      border: 0 !important;
      background-color: transparent !important;
    }
    th{
      border: none !important;
      height: 40px !important;
      background: #021950 !important;
      color: #02CAF2 !important;
    }
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar{
  	display: none;
  }
  ::v-deep .el-table__body{width:100% !important;}

  // 鼠标滑过td上作用的样式，ie6不支持:hover伪类属性，如果是ie6要写成tr.over样式
  .el-table tbody tr:hover>td {
    background-color:transparent!important;
  }
  // 如果td没有颜色，可以去掉，这里加上保险
  .el-table__body tr.hover-row>td {
    background-color: transparent;
  }
  .el-table .warning-row {
      background: #f7faff !important;
    }
    .el-table .success-row {
      background: #ebf1fb !important;
    }
    .linkTitle{
      &:hover{
        color: #02CAF2;
      }
    }
</style>
<style lang="scss">
  .el-tooltip__popper{
    max-width:50% !important;
  }
</style>
